import { addNovelUsingPost } from "@/services/novel-web/novelController";
import { listAllTagUsingGet } from "@/services/novel-web/tagController";
import { MessageError } from "@/utils/commonUtils";
import { isAnyBlank } from "@/utils/stringUtils";
import { Button, Divider, Form, Input, message, Row, Select, Tag } from "antd";
import TextArea from "antd/es/input/TextArea";
import { useEffect, useState } from "react";


const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

const CreateNovel: React.FC = () => {


  // const [form] = Form.useForm();
  const [form_name, setForm_name] = useState<string>('');
  const [form_description, setForm_description] = useState<string>('');
  const [form_tags, setForm_tags] = useState<number[]>([]);
  const [tagOptions,setTagOptions] = useState<API.TagVO[]>([]);
  const loadTagOptions = async ()=>{
    try {
      const resp = await listAllTagUsingGet();
      setTagOptions(resp.data ?? []);
      
    } catch (error) {
      MessageError(error);
    }
  };
  useEffect(()=>{
    loadTagOptions();
  },[]);

  const [disClick,setDisClick] = useState(true);
  useEffect(()=>{
    if(isAnyBlank(form_name,form_description) || form_tags.length == 0) {
      setDisClick(true);
    }
    else {
      setDisClick(false);
    }
  },[form_name,form_description,form_tags])

  const handleFormSubmit = async ()=> {
    const ids = form_tags.join(',');
    
    try {
      const resp =  await addNovelUsingPost({
        name: form_name.trim(),
        description: form_description.trim(),
        tags: ids,
      });
      if(resp.data) {
        message.success("创建成功!");
        location.reload();
      }
    } catch (error) {
      MessageError(error);
    }
  };

  return (<>
    <Row align={"middle"} justify={"space-between"} style={{ margin: 8 }}>
      <div style={{ fontWeight: "bolder", fontSize: 16 }}>
        {"创建作品"}
      </div>
    </Row>
    <Divider />
    <Form {...formItemLayout}
    >
      <Form.Item label="作品名称" name="name" rules={[{ required: true, message: 'Please input!' }]}>
        <Input 
          onChange={(e) => { setForm_name(e.target.value); }} 
          value={form_name} 
        />
      </Form.Item>

      <Form.Item label="作品简介" name="description" rules={[{ required: true, message: 'Please input!' }]}>
        <TextArea 
          value={form_description} 
          onChange={(e) => setForm_description(e.target.value)} 
        />
      </Form.Item>

      <Form.Item label="标签" name="tags" rules={[{ required: true, message: 'Please add!' }]}>
        <Select
          mode="multiple"
          style={{ width: '100%' }}
          placeholder="请选择标签"
          onChange={(value) => setForm_tags(value)}
          value={form_tags}
        >
          {tagOptions.map((tag) => (
            <Select.Option value={tag.id}>{tag.name}</Select.Option>
          ))}
        </Select>
      </Form.Item>
     
      <Form.Item>
        <Button 
          disabled={disClick}
          type="primary"
          onClick={()=>handleFormSubmit()}
        >
          {"提交"}
        </Button>
      </Form.Item>
    </Form>

  </>);
};


export default CreateNovel;